<template>
  <div>
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" alt="" class="img_zuo" @click="clickBack" />
        <div>宣传部署查询</div>
      </div>
    </header>
    <div class="menPhis-main">
      <div class="menPhis-date-box">
        <div class="date-box">
          <div class="date-boxs" @click="openPopup(0)">
            <span class="">{{ origin }}</span>
            <img :src="url" class="img">
          </div>
          <div class="date-line">-</div>
          <div class="date-boxs" @click="openPopup(1)">
            <div class="">{{ terminus }}</div>
            <img :src="url" class="img">
          </div>
        </div>
        <div class="search-box">
          <div class="search-boxs">
            <img src="../../../assets/images/img/search.png" class="img">
            <input
              type="text"
              v-model="searchText"
              class="search-input"
              placeholder="请输入业务类别/参与领导/内容详情等">
          </div>
          <div style="color: #007aff"
               :style="code === 0 ? 'pointer-events:none' : ''"
               @click="searchQuery(1)">搜索</div>
        </div>
      </div>
      <div class="menPhis-date-list">
        <div class="list-title">搜索结果</div>
        <div class="list-gun">
          <van-list
            class="van-pull-refresh"
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            @load="onLoads()">
            <div class="menPhis-box" v-for="(item, index) in searchList" :key="index" @click="jumpDetail(item)">
              <div class="menPhis-box-title">
                <img :src="item.type | imgUrlFilter" class="title-img">
                <div class="menPhis-box-text">
                  <div class="box-title">[{{ item.type }}]
                    <span style="margin-right: 5px">{{ item.title }}</span>
                  </div>
                  <div class="box-titles">
                    <img src="../../../assets/images/tabbar_user.png" class="title-imgs">
                    <span>{{ item.name }}</span>
                  </div>
                </div>
              </div>
              <div style="font-size: 0.35rem">{{ item.TIME }}</div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
    <van-popup v-model="shows"  position="bottom">
      <van-datetime-picker
        id="van-datetime-picker"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="shows = false"
        @confirm="confirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { DatetimePicker, Popup, Toast } from 'vant';
import terminal from '@/assets/js/terminal';
export default {
  data () {
    return {
      date: 'ppt',
      url: require('../../../assets/images/icon-date.png'),
      shows: false,
      minDate: new Date(2015, 0, 1),
      maxDate: new Date(new Date().getUTCFullYear(), new Date().getMonth(), new Date().getDate()),
      currentDate: new Date(),
      origin: '2020-01-01',
      terminus: '2020-09-04',
      minDates: new Date(2020, 0, 1),
      maxDates: new Date(new Date().getUTCFullYear(), new Date().getMonth(), new Date().getDate()),
      id: 0,
      queryRoute: {},
      queryRoutes: {},
      searchText: '',
      searchList: [],
      pageInfo: {
        page: 1,
        pageSize: 20
      },
      loading: false,
      finished: false,
      refreshing: false,
      total: 1,
      finishedText: '',
      error: false,
      code: 200
    };
  },
  components: {
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker
  },
  beforeRouteLeave(to, from, next) {
    //设置路由的 meta
    if(!(to.path === '/infodetail' || to.path === '/xcbs_detail' || to.path === '/hard_detail_ordinary')){
      localStorage.removeItem("list_scrollTop");
    }
    next();
  },
  //进入该页面时，用之前保存的滚动位置赋值
  beforeRouteEnter (to, from, next) {
    next(vm => {
      var list_scrollTop = localStorage.getItem("list_scrollTop")?JSON.parse(localStorage.getItem("list_scrollTop")):null;
      if(list_scrollTop||list_scrollTop===0){
        $('.list-gun').animate({scrollTop: Number(list_scrollTop)}, 0);
      } else {
        vm.userId = localStorage.getItem("userId") //获取访问id
        vm.queryRoute = JSON.parse(sessionStorage.getItem('query'));
        vm.queryRoutes = JSON.parse(localStorage.getItem('query_lev'));
        vm.show = false;
        vm.searchText = '';
        vm.minDates = new Date(2020, 0, 1);
        vm.maxDates = new Date(new Date().getUTCFullYear(), new Date().getMonth(), new Date().getDate());
        vm.searchList = [];
        vm.pageInfo.page = 1;
        if (vm.searchList.length === 0) {
          vm.loading = true;
          vm.finished = true;
          vm.query();
        }
      }
      localStorage.removeItem("list_scrollTop");
    })
  },
  methods: {
    jumpDetail (datas) {
      localStorage.setItem("list_scrollTop",$('.list-gun').scrollTop());
      localStorage.setItem('searchList', JSON.stringify(this.searchList));
      let data = {
        id: datas.id,
        lujing: 'statistical_query'
      }
      if (data.id) {
        sessionStorage.setItem('todetail', JSON.stringify(data))
        if(data.type === '信息报送'){
          this.$router.push('/infodetail')
        }else{
          this.$router.push('/xcbs_detail')
        }
      } else {
        localStorage.setItem('hard_detail_from', '/statistical_query')
        this.$router.push({
          path: '/hard_detail_ordinary',
          query: { id: datas.noweId, ids: 11 }
        });
      }
    },
    onLoads () {
      if (this.searchList.length > 0) {
        this.onLoad();
      } else {
        this.finished = true;
      }
    },
    //  分页加载
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.searchList = [];
          this.refreshing = false;
        }
        if (this.searchList.length !== this.total) {
          this.finished = false;
          this.searchQuerys();
        } else {
          if (this.total > 15) {
            this.finishedText = '没有更多啦';
          } else {
            this.finishedText = '';
          }
          this.finished = true;
        }
      }, 1000);
    },
    // //  下拉加载
    // onRefresh() {
    //   this.pageInfo.page = 1;
    //   this.finished = true;
    //   this.loading = true;
    //   this.onLoad();
    // },
    searchQuery (index) {
      this.pageInfo.page = 1;
      this.searchList = [];
      this.loading = false;
      this.code = 0
      terminal.Start();
      this.searchQuerys(index);
    },
    //  搜索
    searchQuerys (index) {
      let that = this;
      let params = {
        dwId: that.queryRoutes.dwid,
        lev: that.queryRoutes.lev,
        parameter: that.searchText,
        startTime: that.origin,
        endTime: that.terminus,
        page: that.pageInfo.page,
        num: that.pageInfo.pageSize
      };
      if (this.queryRoute.chooseId) {
        params.chooseId = this.queryRoute.chooseId
      }
      if ((this.queryRoute.dwlxid === 1 && (this.queryRoute.lev === 2 && this.queryRoute.path !== '/statistical')) ||
        (this.queryRoute.path === '/index_thisLevel' && this.queryRoute.lev === 1)) {
        params.level = 1
      }
      that.axios.get(`${that.$global_msg.Url.host}/partroInspection/grczlb`,
        { params }).then( res => {
        if (res.data.total === 0) {
          that.$toast("暂无数据");
          that.finished = true;
        }
        if (index !== undefined) {
          terminal.end();
        }
        that.finished = false;
        that.code = res.data.code;
        that.loading = false;
        that.searchList = that.searchList.concat(res.data.list);
        that.total = res.data.total;
        that.code = 200;
        that.pageInfo.page++;
      }).catch( e => terminal._error(e))
    },
    //  返回
    clickBack () {
      this.$router.back();
      // this.$router.push({
      //   path: this.queryRoute.path
      // })
    },
    //  查询数据
    query () {
      this.origin = this.dateConversion(this.minDates);
      this.terminus = this.dateConversion(this.maxDates);
    },
    //  打开弹框
    openPopup (id) {
      this.shows = true;
      this.id = id;
      switch (id) {
        case 0: this.currentDate = this.minDates;
          break;
        default: this.currentDate = this.maxDates;
      }
    },
    //  弹框确定
    confirm () {
      this.shows = false;
      if (this.id === 0) {
        this.minDates = this.currentDate;
        if (this.minDates <= this.maxDates) {
          this.origin = this.dateConversion(this.currentDate);
        } else {
          Toast('起始日期必须小于截止日期');
        }
      } else {
        this.maxDates = this.currentDate;
        if (this.minDates <= this.maxDates) {
          this.terminus = this.dateConversion(this.currentDate);
        } else {
          Toast('截止日期必须大于起始日期');
        }
      }
    },
    //  日期转换
    dateConversion (date) {
      return date.getFullYear() + '-' +
        ((date.getMonth() + 1) < 10 ? `0${(date.getMonth() + 1)}` : date.getMonth() + 1) + '-' +
        (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate());
    }
  },
  filters: {
    imgUrlFilter (str) {
      const file = {
        '风险研判': require('../../../assets/images/yanpan.png'),
        '网络安全宣传': require('../../../assets/images/wangluo.png'),
        '入户安全宣传': require('../../../assets/images/ruhu.png'),
        '现场安全宣传': require('../../../assets/images/xianchang.png'),
        '隐患协调': require('../../../assets/images/xietiao.png'),
        '警示约谈': require('../../../assets/images/yuetan.png'),
        '实战演练': require('../../../assets/images/yanlian.png'),
        '桌面推演': require('../../../assets/images/tuiyan.png'),
        '安全培训': require('../../../assets/images/peixun.png'),
        '安排部署': require('../../../assets/images/bushu.png'),
        '信息报送': require('../../../assets/images/baosong.png'),
        '研判': require('../../../assets/images/yanpan.png'),
        '联系会': require('../../../assets/images/bushu.png'),
        '部署': require('../../../assets/images/bushu.png'),
        '培训': require('../../../assets/images/peixun.png'),
        '约谈': require('../../../assets/images/yuetan.png'),
        '宣传': require('../../../assets/images/xianchang.png'),
        '现场宣传': require('../../../assets/images/xianchang.png'),
        '电视宣传': require('../../../assets/images/xianchang.png'),
        '报刊宣传': require('../../../assets/images/xianchang.png'),
        '协调会': require('../../../assets/images/xietiao.png'),
      };
      return file[str];
    }
  }
}
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .img {
    width: 50px;
    height: 50px;
  }
  .btn-add img {
    width: 0.529629rem;
    height: 0.529629rem;
  }
  .btn-search img {
    width: 0.529629rem;
    height: 0.529629rem;
  }
  .menPhis-main {
    min-height: 100vh;
    padding: 1.8519rem 0 0;
  }
  .menPhis-date-box {
    padding: 0.262963rem;
    background-color: #f7f7f9;
  }
  .date-box {
    display: flex;
    align-items: center;
  }
  .date-boxs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    width: 50%;
    padding: 0.262963rem;
    border-radius: 0.092593rem;
    color: #999999;
  }
  .date-line {
    padding: 0 10px;
    color: #5f5d5c;
  }
  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
  }
  .search-boxs {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    line-height: 100px;
    padding: 0 30px;
    border-radius: 50px;
    flex: 1;
    margin-right: 10px;
  }
  .search-input {
    flex: 1;
    margin-left: 20px;
  }
  .menPhis-date-list {
    height: calc(100vh - 520px);
    padding: 0 0.262963rem;
  }
  .list-title {
    padding: 20px;
    border-bottom: 1Px solid #F2F2F2;
    font-weight: 500;
  }
  .menPhis-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.277778rem 0;
    width: 100%;
  }
  .list-gun {
    height: calc(100vh - 5.648148rem);
    overflow: hidden;
    overflow-y: auto;
  }
  .title-img {
    width: 0.731481rem;
    height: 0.731481rem;
    margin-right: 0.277778rem;
  }
  .title-imgs {
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.2rem;
  }
  .menPhis-box-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 75%;
  }
  .box-title {
    font-size: 0.35rem;
    /*width: 100%;*/
    /*display: flex;*/
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .box-titles {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.296296rem;
    color: #999;
  }
  .menPhis-box-text {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
    line-height: 55px;
    width: 85%;
  }
</style>
<style>
  #van-datetime-picker>div {
    height: 1.25rem;
    line-height: 1.25rem;
  }
  #van-datetime-picker>div>div {
    font-size: 0.3888888888888889rem;
  }
  #van-datetime-picker>div>button {
    padding: 0 50px;
    font-size: 0.3888888888888889rem;
  }
</style>
